<template>
  <div id="container" style="min-width: 800px; min-height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { Graph } from '@antv/x6'
Graph.registerNode(
    'event',
    {
      inherit: 'circle',
      attrs: {
        body: {
          strokeWidth: 2,
          stroke: '#5F95FF',
          fill: '#FFF',
        },
      },
    },
    true,
)

Graph.registerNode(
    'activity',
    {
      inherit: 'rect',
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'image',
          selector: 'img',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          stroke: '#10c4e3',
          fill: '#EFF4FF',
          strokeWidth: 0,
        },
        img: {
          x: 6,
          y: 11,
          width: 16,
          height: 16,
          'xlink:href':
              'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ',
        },
        label: {
          fontSize: 12,
          fill: '#262626',
        },
      },
    },
    true,
)
Graph.registerNode(
    'activityNoBorder',
    {
      inherit: 'rect',
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          stroke: '#f1eef5',
          //  fill: '#EFF4FF',
          strokeWidth: 0,
        },
        label: {
          fontSize: 12,
          fill: '#262626',
        },
      },
    },
    true,
)
Graph.registerNode(
    'gateway',
    {
      inherit: 'polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20',
          strokeWidth: 2,
          stroke: '#5F95FF',
          fill: '#EFF4FF',
        },
        label: {
          text: '+',
          fontSize: 40,
          fill: '#5F95FF',
        },
      },
    },
    true,
)

Graph.registerEdge(
    'bpmn-edge',
    {
      inherit: 'edge',
      attrs: {
        line: {
          stroke: '#A2B1C3',
          strokeWidth: 2,
          targetMarker: {
            name: 'circle', // 椭圆
            rx: 5, // 椭圆箭头的 x 半径
            ry: 5, // 椭圆箭头的 y 半径
            fill:'#fff',
          }
        },
      },
    },
    true,
)
const state = reactive( {
  graph: null,
  datas: {
    "nodes": [
      {
        "id": "2",
        "shape": "activity",
        "width": 100,
        "height": 40,
        "position": {
          "x": 0,
          "y": 160
        },
        "label": "船舶执行"
      },

      {
        "id": "6",
        "shape": "activityNoBorder",
        "width": 80,
        "height": 40,
        "position": {
          "x": 300,
          "y": 120
        },
        "label": "船岸兼容"
      },
      {
        "id": "7",
        "shape": "activityNoBorder",
        "width": 80,
        "height": 40,
        "position": {
          "x": 300,
          "y": 200
        },
        "label": "交船信息确认"
      },

      {
        "id": "13",
        "shape": "activityNoBorder",
        "width": 100,
        "height": 40,
        "position": {
          "x": 560,
          "y": 160
        },
        "label": "与船长确认事项"
      },
    ],
    "edges": [
      {
        "id": "3",
        "shape": "bpmn-edge",
        "source": "2",
        "target": "6"
      },
      {
        "id": "5",
        "shape": "bpmn-edge",
        "source": "2",
        "target": "7"
      },
      {
        "id": "8",
        "shape": "bpmn-edge",
        "source": "6",
        "target": "13"
      },
      {
        "id": "9",
        "shape": "bpmn-edge",
        "source": "7",
        "target": "13"
      },
    ]
  }
})
// 边状态列表
const edgeStatusList = ref([
  {
    id: '3',
    status: 'success',
  },
  {
    id: '5',
    status: 'error',
  },
  {
    id: '8',
    status: 'success',
  },
  {
    id: '9',
    status: 'success',
  },
])
// 开启边的运行动画
const excuteAnimate = () => {
  state.graph.getEdges().forEach((edge) => {
    edge.attr({
      line: {
        stroke: '#3471F9',
      },
    })
    edge.attr('line/strokeDasharray', 0)
    edge.attr('line/style/animation', 'running-line 30s infinite linear')
  })
}

// 关闭边的动画
const stopAnimate = () => {
  state.graph.getEdges().forEach((edge) => {
    edge.attr('line/strokeDasharray', 0)
    edge.attr('line/style/animation', '')
  })
  edgeStatusList.value.forEach((item) => {
    const { id, status } = item
    const edge = state.graph.getCellById(id)
    if (status === 'success') {
      edge.attr('line/stroke', '#52c41a')
    }
    if (status === 'error') {
      edge.attr('line/stroke', '#ff4d4f')
    }
  })
  // 默认选中一个节点
// state.graph.select('node-2')
}
const initGraph = () => {
  state.graph = new Graph({
    container: document.getElementById('container'),
    width: '100%',
    height: '100%',
    interacting: false,
    connecting: {
    router: 'orth',
  },
})
  // const cells = []
  // state.datas.forEach((item) => {
  //   if (item.shape === 'bpmn-edge') {
  //     cells.push(graph.createEdge(item))
  //     state.edges(item)
  //   } else {
  //     cells.push(graph.createNode(item))
  //   }
  // })
  // graph.resetCells(cells)
  state.graph.fromJSON(state.datas)
  setTimeout(() => {
    excuteAnimate()
  }, 1000)
  setTimeout(() => {
    stopAnimate()
  }, 2000)
  state.graph.zoomToFit({ padding: 10, maxScale: 1 })
}
onMounted(() => {
  if (document.getElementById('container')) {
    initGraph()
  }
})
</script>

<style scoped>

</style>
